<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="example">
        <div class="box">
            <ul class="mainmenu" :class="current">
                <li class="music" v-on:click="current='music'">
                    <router-link to="/music">音乐</router-link>
                </li>
                <li class="videos" v-on:click="current='videos'">
                    <router-link to="/videos">电影</router-link>
                </li>
                <li class="news" v-on:click="current='news'">
                    <router-link to="/news">新闻</router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </div>
    <template id="music">
        <div class="sub">
            <div class="submenu">
                <ul :class="subcur">
                    <li class="first" v-on:click="subcur='first'">
                        <router-link to="/music/pop">流行音乐</router-link>
                    </li>
                    <li class="second" v-on:click="subcur='second'">
                        <router-link to="/music/nat">民族音乐</router-link>
                    </li>
                    <li class="third" v-on:click="subcur='third'">
                        <router-link to="/music/cla">古典音乐</router-link>
                    </li>
                </ul>
            </div>
            <router-view></router-view>
        </div>
    </template>

    <template id="movie">
        <div class="sub">
            <div class="submenu">
                <ul :class="subcur">
                    <li class="first" v-on:click="subcur='first'">
                        <router-link to="/movie/love">爱情电影</router-link>
                    </li>
                    <li class="second" v-on:click="subcur='second'">
                        <router-link to="/movie/comedy">喜剧电影</router-link>
                    </li>
                    <li class="third" v-on:click="subcur='third'">
                        <router-link to="/movie/action">动作电影</router-link>
                    </li>
                </ul>
            </div>
            <router-view></router-view>
        </div>
    </template>

    <template id="news">
        <div class="sub">
            <div class="submenu">
                <ul :class="subcur">
                    <li class="first" v-on:click="subcur='first'">
                        <router-link to="/news/ent">娱乐新闻</router-link>
                    </li>
                    <li class="second" v-on:click="subcur='second'">
                        <router-link to="/news/sport">体育新闻</router-link>
                    </li>
                    <li class="third" v-on:click="subcur='third'">
                        <router-link to="/news/social">社会新闻</router-link>
                    </li>
                </ul>
            </div>
            <router-view></router-view>
        </div>
    </template>
</body>

<script type="text/javascript">
    var Music = {
        data: function () {
            return {
                subcur: 'first'
            }
        },
        template: '#music'
    }

    var Movie = {
        data: function () {
            return {
                subcur: 'first'
            }
        },
        template: '#movie'
    }

    var News = {
        data: function () {
            return {
                subcur: 'first'
            }
        },
        template: '#news'
    }

    var Popular = {
        template: '<div>流行音乐内容</div>'
    }
    var National = {
        template: '<div>民族音乐内容</div>'
    }
    var Classical = {
        template: '<div>古典音乐内容</div>'
    }
    var Love = {
        template: '<div>爱情电影内容</div>'
    }
    var Comedy = {
        template: '<div>喜剧电影内容</div>'
    }
    var Action = {
        template: '<div>动作电影内容</div>'
    }
    var Ent = {
        template: '<div>娱乐新闻内容</div>'
    }
    var Sport = {
        template: '<div>体育新闻内容</div>'
    }
    var Social = {
        template: '<div>社会新闻内容</div>'
    }

    var routes = [{
        path: '/music',
        component: Music,
        children: [
            {
                path: "",
                component: Popular
            },
            {
                path: "pop",
                component: Popular
            },
            {
                path: "nat",
                component: National
            },
            {
                path: "cla",
                component: Classical
            },
        ]
    },
    {
        path: '/movie',
        component: Movie,
        children: [
            {
                path: "",
                component: Love
            },
            {
                path: "love",
                component: Love
            },
            {
                path: "comedy",
                component: Comedy
            },
            {
                path: "action",
                component: Action
            },
        ]
    },
    {
        path: '/news',
        component: News,
        children: [
            {
                path: "",
                component: Ent
            },
            {
                path: "ent",
                component: Ent
            },
            {
                path: "sport",
                component: Sport
            },
            {
                path: "social",
                component: Social
            },
        ]
    },
    {
        path: "*",
        redirect: '/music'
    }
    ]

    var router = new VueRouter({
        routes
    })

    var app = new Vue({
        el: '#example',
        data: {
            current: 'music'
        },
        router
    })
</script>

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    body {
        font-family: 微软雅黑
    }

    .box {
        width: 306px;
        margin: 10px auto
    }

    .box a,
    .sub a {
        text-decoration: none
    }

    ul {
        list-style: none
    }

    ul.mainmenu li {
        float: left;
    }

    ul.mainmenu li a {
        display: block;
        background: #fefefe;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));
        border: 1px solid #ccc;
        padding: 5px 0;
        width: 100px;
        text-align: center;
        cursor: pointer;
        color: #9966FF;
    }

    .submenu {
        width: 100px;
        height: 80px;
        border-right: 1px solid #999999
    }

    .submenu ul {
        width: 80px;
        margin: 0 auto;
    }

    .submenu li {
        width: 80px;
        height: 26px;
        line-height: 26px;
        cursor: pointer;
        font-size: 14px;
        text-align: center
    }

    .submenu li:hover {
        background: #EEEEEE
    }

    .sub div {
        float: left;
        display: inline-block;
        font-size: 14px
    }

    .sub div {
        margin-right: 10px;
    }

    .music .music a,
    .videos .videos a,
    .news .news a {
        border-bottom: none;
        background: #fff;
    }

    .first .first,
    .second .second,
    .third .third {
        background: #DDEEFF
    }

    .box>div {
        clear: both;
        border: 1px solid #ccc;
        border-top: none;
        width: 304px;
        height: 100px;
        padding-top: 20px;
        text-align: center;
        font-size: 14px;
        margin-top: -1px;
    }
</style>

</html>